<template>
	<view class="container">
	  <view class="order-item oaddress">
	    <navigator url="/pages/address/address">
	      <view class="address">
	        <view class="addname">
	          <text>刘生</text>
	          <text>13589098776</text>
	        </view>
	        <view class="addinfo">
	          广东省广州市越秀区五羊新城120号203房
	        </view>
	      </view>
	      <image src="/static/arrow-right.png" />
	    </navigator>
	  </view>
	
	  <view class="order-item opay">
	    <text>支付方式：</text>
	    <text>微信支付</text>
	  </view>
	
	  <view class="cartlist order-item">
	    <view class="cart-item">
	      <image src="/static/p1.jpg" mode="widthFix" />
	      <view class="pinfo">
	        <text class="pname">奔驰A级 2019款 A180 L</text>
	        <view class="cart-bottom">
	          <text class="pprice">￥232,460</text>
	          <view class="opt">
	            ×1
	          </view>
	        </view>
	      </view>
	    </view>
	    <view class="cart-item">
	      <image src="/static/p1.jpg" mode="widthFix" />
	      <view class="pinfo">
	        <text class="pname">奔驰A级 2019款 A180 L</text>
	        <view class="cart-bottom">
	          <text class="pprice">￥232,460</text>
	          <view class="opt">
	            ×1
	          </view>
	        </view>
	      </view>
	    </view>
	    <view class="cart-item">
	      <image src="/static/p1.jpg" mode="widthFix" />
	      <view class="pinfo">
	        <text class="pname">奔驰A级 2019款 A180 L</text>
	        <view class="cart-bottom">
	          <text class="pprice">￥232,460</text>
	          <view class="opt">
	            ×2
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
	
	   <view class="bottomopt">
	    <view>
	      <text>合计：</text>
	      <text>￥385,909</text>
	    </view>
	    <button>提交订单</button>
	  </view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page{
  background: #F8F8FF;
  font-size: 32rpx;
}
.container{
  margin:16rpx;
  padding-bottom: 100rpx;
}
.order-item{
  background-color: white;
  border-radius: 16rpx;
  padding:24rpx;
  margin: 16rpx 0;
}
.oaddress navigator{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.oaddress image{
  width:22px;
  height: 22px;
}
.address{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.addname text{
  font-size: 48rpx;
  line-height: 80rpx;
  margin-right: 24rpx;
}
.addinfo{
  
  line-height: 64rpx;
}
.opay{
  display: flex;
  flex-direction: row;
  line-height: 64rpx;
}
.opay text:last-child{
  font-weight: 600;
}
.cartlist{
  display: flex;
  flex-direction: column;
  
}
 .cart-item{
  background-color: white;
  margin: 16rpx;
  display: flex;
  flex-direction: row;
  border-radius: 16rpx;
  overflow: hidden;
}
.cart-item image{
  width:282rpx;
  margin-right: 16rpx;
  display: block;
}

 .pinfo{
  flex:1;
} 
.pname{
  font-size: 28rpx;
  line-height: 64rpx;
  padding-top:32rpx;
  display: block;
}
.cart-bottom{
  display: flex;
  flex-direction: row;
  margin-top: 16rpx;
}
.pprice{
  font-size: 32rpx;
  color:red;
  display: block;
  flex:1;
}
.bottomopt{
  display: flex;
  flex-direction: row;
  background-color: white;
  border-top:1px solid #ccc;
  width:100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100rpx;
  z-index: 100;
}
.bottomopt view{
  font-size: 28rpx;
  line-height: 100rpx;
  padding-left: 16rpx;
  flex: 1;
  text-align: center;
}
.bottomopt view text:last-child{
  color:red;
}
.bottomopt button{
  width:200rpx;
  height: 78rpx;
  background-color: #d81e06;
  border-radius: 78rpx;
  color:white;
  line-height: 78rpx;
  margin-right: 32rpx;
  margin-top: 11rpx;
  font-size: 32rpx;
  padding:0;
} 
</style>
